<template>
	<div class="logins">
		<div class="loginBox">
			<div class="loginTip">登录系统</div>
			<el-form :model="form" size="large" class="loginContainer" style="max-width: 600px">
				<el-form-item>
					<el-input v-model="form.account" placeholder="账号" prefix-icon="User" />
				</el-form-item>
				<el-form-item>
					<el-input
						v-model="form.password"
						type="password"
						show-password
						placeholder="密码"
						@keyup.enter.native="onSubmit"
						prefix-icon="Lock"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="submitBtn" @click="onSubmit">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="arrival">
			©CopyRight 2022-{{ new Date().getFullYear() }}
			<a href="https://scwff.com" target="_blank" rel="noopener noreferrer">scwff.com</a>
			.
			<p><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">渝ICP备2022003357号-1</a></p>
		</div>
	</div>
</template>
<script setup lang="ts">
import { Md5 } from 'ts-md5';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { userStores } from '@/stores';
import { ElMessage } from 'element-plus';
import { login } from '@/utils/api';
const router = useRouter();
const store = userStores();
const form: any = reactive({
	account: '',
	password: '',
});
const onSubmit = () => {
	if (!form.account) {
		ElMessage.error('账号不能为空');
		return;
	}
	if (!form.password) {
		ElMessage.error('密码不能为空');
		return;
	}
	// 定义MD5对象
	const md5: any = new Md5();
	md5.appendAsciiStr(form.password);
	const password = md5.end();
	login({
		account: form.account,
		password: password,
	}).then((res: any) => {
		if (res) {
			store.system.token = res.data;
			ElMessage.success('登录成功');
			router.replace('/index');
		}
	});
};
</script>
<style scoped lang="scss">
.logins {
	width: 100%;
	height: 100%;
	background: #2d3a4b;
	.loginBox {
		width: 400px;
		height: 260px;
		border-radius: 5px;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		// background: #ffffff;
		padding: 20px;
		.loginTip {
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 20px;
			color: #ffffff;
		}
		.submitBtn {
			width: 100%;
		}
	}
	.arrival {
		color: #dedede;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
		margin: auto;
		text-align: center;
		a {
			color: #dedede;
		}
	}
}
</style>
<style>
.loginContainer .el-input__wrapper {
	background: none;
}
.loginContainer .el-input__wrapper .el-input__inner {
	color: #ffffff;
}
</style>
